<template>
    <view class="content">
		<page-head :title="i18n.main.security"></page-head>
		<image src="../../static/tabbar/return.png" mode="" class="page-return" @tap="back"></image>
		
		<view class="msg-list">
			<view class="li" @click="forward(i18n.center.login,1)">
				<view class="li-text">
					{{i18n.center.login}}
					<m-icon color="#666666" type="forward" size="25" class="li-icon"></m-icon>
				</view>
				
			</view>
			
			<view class="li" @click="forward(i18n.center.trade,2)">
				<view class="li-text">
					{{i18n.center.trade}}
					<m-icon color="#666666" type="forward" size="25" class="li-icon"></m-icon>
				</view>
			</view>
		</view>
		
		<button class="btn-submit" @tap="logout">{{i18n.center.logout}}</button>
		
		<uni-popup :show="showPopup" type="middle" v-on:hidePopup="hidePopup">
			<view class='popup'>
				<view class="pop-title">{{text}}</view>
				<m-input type="password" displayable v-model="invitation" maxlength="20" :placeholder="text" class="pop-input" v-if="status == 1" color="#6D6D72"></m-input>
				<m-input type="password" displayable v-model="invitation" maxlength="6" :placeholder="text" class="pop-input" v-if="status == 2" color="#6D6D72"></m-input>
				
				<view class="pop-input">
					<input class="pop-code" type="text" v-model="verifycode" :placeholder="i18n.code.code" maxlength="6">
					
					<view class="pop-obtain">
						<view v-if="countdown > 61" @tap="verification">{{i18n.code.obtain}}</view>
						<view v-if="countdown == 61" @tap="verification">{{i18n.code.reacquire}}</view>
						<view v-if="countdown < 61">{{countdown}} {{i18n.code.seconds}}</view>
					</view>
				</view>
				<view class="pop-left" @tap="shut">取消</view>
				<view class="pop-right" @tap="submit" v-if="type == 1">确定</view>
				<view class="pop-right" v-else>确定</view>
			</view>
		</uni-popup>
    </view>
</template>

<script>
	import service from '../../service.js';
    import mInput from '../../components/m-input.vue';
	import uniPopup from "@/components/uni-popup.vue";
	import pageHead from '../../components/page-head.vue';
	import mIcon from '../../components/m-icon/m-icon.vue';
	export default {
		computed: {
			i18n () {
				return this.$t('index');
			}
		},
		components: {
			uniPopup,
			pageHead,
            mInput,
			mIcon
        },
		data() {
			return {
				loadingType: 0,
				contentText: uni.getStorageSync('content'),
				token: uni.getStorageSync('token'),
				user:uni.getStorageSync('user'),
				lang: uni.getStorageSync('lang'),
				systemlist:[],
				showPopup:false,
				text: '',
				texter:'',
				verifycode:'',
				invitation:'',
				account:'',
				countdown:62,
				status:0,
				type:1,
				url:'',
			};
		},
		onShow:function(){
			uni.setNavigationBarTitle({
				title: this.i18n.main.security
			})
		},
		methods:{
			back(){
				uni.switchTab({
					url: '/pages/main/user'
				})
			},
			forward(text,num){
				this.text = text;
				this.status = num;
				if(num == 1){
					this.url = service.api.center.login;
					this.texter = this.i18n.center.login2;
				}else{
					this.url = service.api.center.trade;
					this.texter = this.i18n.center.trade2;
				}
				this.showPopup = true;
			},
			//统一的关闭popup方法
			hidePopup: function() {
				this.invitation = '';
				this.verifycode = '';
				this.showPopup = false;
			},
			//关闭邀请码弹窗
			shut(){
				this.invitation = '';
				this.verifycode = '';
				this.showPopup = false;
			},
			verification(){
				self = this;
				//發送短信驗證碼
				service.upload(this, service.api.reg.code, {
					'account': self.user.account
				}, '', '', function(self, res) {
					uni.showToast({
						icon: 'none',
						title: res.info
					});
					if (res.code == 1) {
						self.codetime(self,60);
					}
				});
			},
			//手機驗證碼獲取倒計時
			codetime: function(obj,num) {
				if(num<10){
					obj.countdown = "0"+num;
				}else{
					obj.countdown = num;
				}
				num--;
				if(num < 0){
					obj.countdown = 61;
				}else{
					setTimeout(function(){
						obj.codetime(obj,num);
					}, 1000);
				}
			},
			submit(){
				self = this;
				if(self.invitation == ''){
					uni.showToast({
						icon: 'none',
						title: self.texter + self.i18n.center.empty,
					});
					return;
				}
				if(self.status == 1){
					if(self.invitation.length < 6){
						uni.showToast({
							icon: 'none',
							title: self.i18n.reg.pass,
						});
						return;
					}
				}else{
					if(self.invitation.length != 6){
						uni.showToast({
							icon: 'none',
							title: self.i18n.reg.pass2,
						});
						return;
					}
				}
				if(self.verifycode.length < 6){
					uni.showToast({
						icon: 'none',
						title: self.i18n.code.verification
					});
					return;
				}
				self.type = 0;
				service.upload(this, self.url, {
					'password':self.invitation,
					'change_pwd':self.invitation,
					'code':self.verifycode
				}, '', '', function(_self, res) {
					uni.showToast({
						icon: 'none',
						title: res.info
					});
					if(res.code == 1){
						setTimeout(function(){
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}else{
						self.type = 1;
					}
				});
			},
			logout(){
				uni.setStorageSync('token','');
				uni.setStorageSync('logo','');
				uni.reLaunch({
					url: '/pages/login/login',
				});
			}
		}
    }
</script>

<style lang="scss">
	.content{
		padding: 0;
		background: #F2F2F2;
	}
	.uni-popup-middle{
		width: 70%;
	}
	.msg-list{
		margin: 0;
		width: 100%;
	}
	.li{
		color: #333333;
		font-size: 38upx;
		background: #FFFFFF;
		padding: 40upx 40upx;
		border-bottom: 2upx solid #F2F2F2;
	}
	.li-icon{
		float: right;
		margin-right: -20upx;
	}
</style>